<template>
    <div> 
        <h3>优惠券列表</h3>
        <div>
            优惠券名称:
            <input type="text" v-model="Info.CouponName">
            优惠券类型:
            <select v-model="Info.CouponType">
                <option value="">请选择</option>
                <option :value="item.CouponType" v-for="item in date.list">{{ item. CouponType}}</option>
            </select>
            <input type="button" value="查询" @click="show">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>优惠券编号</td>
                    <td>优惠券名称</td>
                    <td>优惠券类型</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in date.list" :key="item.CouponId">
                    <td>{{ item.CouponId }}</td>
                    <td>{{ item.CouponName }}</td>
                    <td>{{ item.CouponType }}</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ date.TotalCount }}行</span>
            <span>共{{ date.TotalPage }}页</span>
            <span>第{{ Info.PageIndex }}/{{ date.TotalPage }}页</span>

            <input type="button" value="首页" @click="gopage(1)">
            <input type="button" value="上一页" @click="gopage(Info.PageIndex-1)">
            <span v-for="item in date.TotalPage" @click="gopage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="gopage(Info.PageIndex+1)">
            <input type="button" value="尾页" @click="gopage(date.TotalPage)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
import router from '@/router';
import { idText } from 'typescript';
const Route = useRoute();
const Router = useRouter();

let Info:any=reactive({
    PageIndex:1,
    PageSize:3,
    CouponName:'',
    CouponType:''
})
let date:any=reactive({
    TotalCount:0,
    TotalPage:0,
    list:[]
})
onMounted(()=>{
    getlist();
})
const gopage=(num:any)=>{
    if(num<1)
    {
        num=1;
        return;
    }
    if(num>date.TotalPage)
    {
        num=date.TotalPage;
        return;
    }
    Info.PageIndex=num;
    getlist();
}
const getlist=()=>{
    axios({
        url:'/api/Coupons/GetCouponsList',
        method:'get',
        params:Info
    })
    .then((res)=>{
        console.log(res);
        Object.assign(date,res.data);
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
const show=()=>{
    Info.PageIndex=1;
    getlist();
}
</script>

<style scoped>
span{
    margin: 0 5px;
}
</style>